<template>
	<view class="mySchedule-content">
        <uni-nav-bar fixed left-icon="left" @clickLeft="backHandle" @clickRight="openHandle" title="我的日程" class="unibarS">
            <block slot="right">
                <svg-icon svgPath="/static/svg/icon-shaixuan.svg" color="#0C1019" size="18px" />
			</block>
        </uni-nav-bar>
		<view class="calendar">
            <uni-calendar
                class="uni-calendar--hook"
                :selected="info.selected"
                :showMonth="false"
                @change="change"
                @monthSwitch="monthSwitch" 
            />
		</view>
        <view v-if="list.length" class="schedule-day-list">
            <view class="schedule-day-list-item" @click="clickItem(item)" v-for="(item, index) in list" :key="index">
                <!-- 放置左侧的颜色线 -->
                <view :style="{ backgroundColor: getColor(item.taskStatus) }" class="schedule-day-list-item-left"></view>
                <!-- 内容 -->
                <view class="schedule-day-list-item-content">
                    <!-- 左侧 -->
                    <view class="item-content-box">
                        <view class="item-content-box-time">{{ item.followupTime }}</view>
                        <view class="item-content-box-text">{{ item.followupContent }}</view>
                    </view>
                    <!-- 状态 -->
                    <view class="item-state-box" :style="{ color: getColor(item.taskStatus) }">{{ bus_task_status[item.taskStatus] }}</view>
                </view>
            </view>
            <uni-load-more :status="status" />
        </view>
        <template v-else>
            <u-empty
                mode="data"
                :icon="empty">
            </u-empty>
        </template>
        <!-- 抽屉 -->
        <!-- <u-popup :show="show" mode="right" @close="close" @open="open">
            <view class="drawer-box">
                <view class="drawer-content">
                    <view class="drawer-item">
                        <view class="drawer-title">任务分类</view>
                        <view class="drawer-classify">
                            <view v-for="item in bus_task" :key="item.dictValue" :class="{ active: tempSearchObj.taskStatus == item.dictValue}" @click="clickTabs(item)">{{ item.dictLabel }}</view>
                        </view>
                    </view>
                    <view class="drawer-item">
                        <view class="drawer-title">关键词查询</view>
                        <view class="drawer-classify">
                            <u--input
                                placeholder="请输入日程关键词"
                                border="surround"
                                v-model="tempSearchObj.keyWords">
                            </u--input>
                        </view>
                    </view>
                </view>
                <view class="drawer-footer">
                    <view class="drawer-footer-res" @click="reset">重置</view>
                    <view class="drawer-footer-sub" @click="submit">确定</view>
                </view>
            </view>
		</u-popup> -->
        <uni-popup ref="popup" type="right" border-radius="10px 10px 0 0">
            <view class="drawer-box">
                <view class="drawer-content">
                    <view class="drawer-item">
                        <view class="drawer-title">任务分类</view>
                        <view class="drawer-classify">
                            <view v-for="item in bus_task" :key="item.dictValue" :class="{ active: tempSearchObj.taskStatus == item.dictValue}" @click="clickTabs(item)">{{ item.dictLabel }}</view>
                        </view>
                    </view>
                    <view class="drawer-item">
                        <view class="drawer-title">关键词查询</view>
                        <view class="drawer-classify">
                            <u--input
                                placeholder="请输入日程关键词"
                                border="surround"
                                v-model="tempSearchObj.keyWords">
                            </u--input>
                        </view>
                    </view>
                </view>
                <view class="drawer-footer">
                    <view class="drawer-footer-res" @click="reset">重置</view>
                    <view class="drawer-footer-sub" @click="submit">确定</view>
                </view>
            </view>
        </uni-popup>
	</view>
</template>
<script>
import { convertToDict } from '@/common/utils'
export default {
	data() {
		return {
            params: {
                followupType: 0,
                startTime: null,
                endTime: null,
                keyWords: '',
                taskStatus: null,
                pageNum: 1,
				pageSize: 20
			},
            total: 0,
			status: 'loading',
			refresh: false,
			list: [],
			tabIndex: 1,
            formData:{
                str: ''
            },
            info: {
                lunar: true,
                range: true,
                insert: false,
                selected: []
            },
            show: false,
            queryData: {
                startTime: null,
                endTime: null,
                keyWords: '',
                taskStatus: null,
                dataType: 0
            },
            empty: '/static/img/other/empty.png',
            tempSearchObj: {
                keyWords: '',
                taskStatus: null
            }
		}
	},
    created() {
        this.bus_task = JSON.parse(uni.getStorageSync('bus_task_status'))
        this.bus_task_status = convertToDict(this.bus_task)
        const today = new Date();
        const todayFormatted = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
        this.params.startTime = todayFormatted + ' 00:00:00'
        this.params.endTime = todayFormatted + ' 23:59:59'

        // 获取当月的数据
        let yn = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}`;
        this.getDayList(yn)

        this.getData()
    },
	methods: {
        getData() {
			this.$http.get('/app/followup_record/list', this.params).then(res => {
				if (res.code == 200) {
					this.list = [...this.list, ...res.rows]
					this.total = res.total
					if (this.total > this.list.length) {
						this.status = 'more'
					} else {
						this.status = 'noMore'
					}
					// if (this.refresh) {
					// 	uni.stopPullDownRefresh()
					// }
				} else {
					uni.$u.toast(res.msg)
				}
			})
		},
        // 获取当月的第一天和最后一天，获取有跟进日期的的数据
        getDayList(yearMonth) {

            // 解析输入的年份和月份
            const [year, month] = yearMonth.split('-').map(Number);

            // 获取当月的第一天
            const firstDay = new Date(Date.UTC(year, month - 1, 1));
            const firstDayString = firstDay.toISOString().split('T')[0];
            // 获取当月的最后一天
            const lastDay = new Date(Date.UTC(year, month, 0));
            const lastDayString = lastDay.toISOString().split('T')[0];

            this.queryData.startTime = firstDayString 
            this.queryData.endTime = lastDayString
            this.getlistDayData()
        },
        getlistDayData() {
			this.$http.get('/app/followup_record/listDayData', this.queryData).then(res => {
                // console.log(res)
				if (res.code == 200) {
                    this.info.selected = res.data.map(item => {
                        return {
                            date: item
                        }
                    })
				}
			})
		},

		clickTabs(item) {
			// this.tabIndex = item.dictValue;
            this.tempSearchObj.taskStatus = item.dictValue
		},
        clickItem(item) {
            uni.navigateTo({
                url: '/pages/task/taskDetails?id=' + item.id
            });
        },
        getColor(state) {
            let color;
            switch (state) {
                case '1001':
                color = 'rgba(103, 117, 133, 1)';
                break;
                case '1002':
                color = 'rgba(0, 186, 173, 1)';
                break;
                case '1003':
                color = 'rgba(255, 141, 26, 1)';
                break;
                default:
                color = 'rgba(103, 117, 133, 1)';
            }
            return color;
        },
        openHandle() {
            console.log('open');
            this.$refs.popup.open()
        },
        reset() {
            this.tempSearchObj = {
                keyWords: '',
                taskStatus: null
            }
            this.submit()
        },
        submit() {
            this.setQueryHandle()
            this.getlistDayData()
            this.params.pageNum = 1
            this.list = []
            this.getData()
            this.$refs.popup.close()
        },
        setQueryHandle() {
            Object.keys(this.tempSearchObj).forEach(key => {
				if (this.params.hasOwnProperty(key)) {
					this.params[key] = this.tempSearchObj[key];
				}
				if (this.queryData.hasOwnProperty(key)) {
					this.queryData[key] = this.tempSearchObj[key];
				}
			});
        },
        change(e) {
            this.params.startTime = e.fulldate + ' 00:00:00'
            this.params.endTime = e.fulldate + ' 23:59:59'
            this.list = []
            this.params.pageNum = 1
            this.status = 'loading'
            this.getData()
        },
        monthSwitch(e) {
            
            let yn = e.year + '-' + String(e.month).padStart(2, '0');
            this.getDayList(yn)
        },
        open() {
            // console.log('open');
        },
        close() {
            this.show = false
            // console.log('close');
        },
        backHandle() {
            uni.navigateBack()
        }
	}
}
</script>

<style lang="scss" scoped>
	.mySchedule-content {
		background: rgba(247, 248, 250, 1);
	}
	.unibarS {
		/deep/.uni-navbar__header {
			padding: 0 32rpx;
		}
		/deep/.uni-navbar__content {
			border-bottom: none !important;
			box-shadow: 0px 0px 4px  rgba(136, 136, 136, 0.12);
		}
	}
	.input-view {
		width: 100%;
		/deep/.u-tabs__wrapper__nav__item {
			flex: 1;
		}
		/deep/.u-tabs__wrapper__nav__line {
			background: rgba(77, 172, 177, 1) !important;
		}
	}
    /deep/.uni-calendar-item__weeks-box-circle {
        position: absolute;
            top: auto;
            bottom: 6rpx;
            left: 42rpx;
            background-color: rgba(77, 172, 177, 1);
    }
    /deep/.uni-calendar-item--checked {
        background-color: white;
        color: #333;
        opacity: 1;
        .uni-calendar-item__weeks-box-text {
            color: white;
            background: rgba(77, 172, 177, 1);
            border-radius: 50%;
            width: 48rpx;
            height: 48rpx;
            text-align: center;
            line-height: 48rpx;
        }
        // .uni-calendar-item__weeks-box-circle {
        //     position: absolute;
        //     top: auto;
        //     bottom: 6rpx;
        //     left: 42rpx;
        //     background-color: #4DACB1FF;
        // }
    }
    .schedule-day-list {
        padding: 40rpx 30rpx;
        .schedule-day-list-item {
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;
            border-radius: 20px;
            background: rgba(255, 255, 255, 1);
            padding: 32rpx;
            .schedule-day-list-item-left {
                width: 8rpx;
                height: 68rpx;
                border-radius: 40rpx;
                background: rgba(255, 0, 28, 1);
                margin-right: 16rpx;
            }
            .schedule-day-list-item-content {
                flex: 1;
                display: flex;
                align-items: center;
                .item-content-box {
                    width: 0;
                    flex: 1;
                    .item-content-box-time {
                        font-size: 28rpx;
                        font-weight: 500;
                        color: rgba(103, 117, 133, 1);
                    }
                    .item-content-box-text {
                        font-size: 32rpx;
                        font-weight: 500;
                        color: rgba(12, 16, 25, 1);
                        margin-top: 8rpx;
                        white-space: nowrap; /* 不换行 */
                        overflow: hidden; /* 隐藏溢出内容 */
                        text-overflow: ellipsis; /* 使用省略号 */
                    }
                }
                .item-state-box {
                    font-size: 24rpx;
                    font-weight: 400;
                    color: rgba(103, 117, 133, 1);
                    margin-left: 40rpx;
                }
            }
        }

    }
    .drawer-box {
        width: 622rpx;
        height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: white;
        .drawer-title{
            font-size: 32rpx;
            color: rgba(12, 16, 25, 1);
            font-weight: 500;
            padding: 20rpx 0;
        }
        .drawer-content{
            flex: 1;
            overflow-y: auto;
            padding: 0 24rpx;
            .drawer-item {
                .drawer-classify {
                    display: flex;
                    flex-wrap: wrap;
                    >view {
                        font-size: 28rpx;
                        font-weight: 400;
                        color: rgba(103, 117, 133, 1);
                        border-radius: 16rpx;
                        background: #FFFFFFFF;
                        border: 2rpx solid #67758566;
                        padding: 16rpx 0;
                        width: 174rpx;
                        margin-right: 20rpx;
                        margin-bottom: 20rpx;
                        text-align: center;
                    }
                    :nth-child(3n) {
                        margin-right: 0;
                    }
                    .active {
                        border: none;
                        background: #4DACB1FF;
                        color: rgba(255, 255, 255, 1);
                    }
                }
            }
        }
        .drawer-footer{
            padding: 24rpx;
            display: flex;
            > view {
                border-radius: 8rpx;
                text-align: center;
                height: 44px;
                line-height: 44px;
                font-size: 32rpx;
                font-weight: 500;
            }
            .drawer-footer-res {
                height: 42px;
                width: 154rpx;
                background: #FFFFFFFF;
                border: 3rpx solid #4DACB1FF;
                color: rgba(77, 172, 177, 1);
                margin-right: 20rpx;
            }
            .drawer-footer-sub {
                flex: 1;
                background: #4DACB1FF;
                color: #FFFFFFFF;
            }
        }
    }
    

</style>
